<template>
  <footer
    class="footer brand-1"
    :style="`background-image: url(${$config.public.baseUrl}images/footer/1.png)`"
  >
    <div class="container">
      <div class="footer__wrapper">
        <div id="custom-footer" class="footer__top padding-top padding-bottom">
          <div class="row g-5">
            <div class="col-xl-4 col-md-6">
              <div class="footer__about">
                <nuxt-link
                  to="/"
                  class="footer__about-logo"
                  style="font-size: 40px; color: #ffffff"
                >
                  <!-- <img src="/images/logo/logo.png" alt="Logo"/> -->
                  StudioPrism
                </nuxt-link>
                <p class="footer__about-moto">
                  我们致力于提供免费的高质量资产和专业课程，涵盖游戏开发、设计等领域。无论你是初学者还是资深开发者，都能在这里找到实用资源，激发创意，提升技能。加入我们，免费解锁无限可能！
                </p>
              </div>
            </div>
            <div class="col-xl-3 col-md-6 col-sm-6">
              <div class="footer__links">
                <div class="footer__links-item">
                  <div class="footer__links-tittle">
                    <h6>Get In Touch</h6>
                  </div>
                  <ul class="footer__about-info">
                    <li class="footer__about-item">
                      <div class="footer__about-inner">
                        <img src="/images/footer/1.svg" alt="icon" />
                        <div class="info">
                          <p class="m-0">
                            广东省广州市天河区科韵路<br />软银数码港
                          </p>
                        </div>
                      </div>
                    </li>
                    <li class="footer__about-item">
                      <div class="footer__about-inner">
                        <img src="/images/footer/2.svg" alt="icon" />
                        <div class="info">
                          <nuxt-link to="mailto:455572202@qq.com"
                            >455572202@qq.com</nuxt-link
                          >

                          <br />
                          <nuxt-link to="mailto:455572202@qq.com"
                            >455572202@qq.com</nuxt-link
                          >
                        </div>
                      </div>
                    </li>

                    <li class="footer__about-item">
                      <div class="footer__about-inner">
                        <img src="/images/footer/3.svg" alt="icon" />
                        <div class="info">
                          <nuxt-link to="tel:+18844157515"
                            >18844157515</nuxt-link
                          >
                          <br />
                          <nuxt-link to="tel:+18844157515"
                            >18844157515</nuxt-link
                          >
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-xl-2 col-md-6 col-sm-6">
              <div class="footer__links">
                <div class="footer__links-tittle">
                  <h6>Explore Links</h6>
                </div>
                <div class="footer__links-content">
                  <ul class="footer__linklist">
                    <li class="footer__linklist-item">
                      <nuxt-link to="/courses">Courses</nuxt-link>
                    </li>
                    <li class="footer__linklist-item">
                      <nuxt-link to="/about">About Us</nuxt-link>
                    </li>
                    <li class="footer__linklist-item">
                      <nuxt-link to="/course-details"
                        >Content Writing</nuxt-link
                      >
                    </li>
                    <li class="footer__linklist-item">
                      <nuxt-link to="/course-details">Management</nuxt-link>
                    </li>
                    <li class="footer__linklist-item">
                      <nuxt-link to="/course-details"
                        >Web Development</nuxt-link
                      >
                    </li>
                    <li class="footer__linklist-item">
                      <nuxt-link to="/course-details">Art & Design</nuxt-link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-md-6 col-12">
              <div class="footer__links">
                <div class="footer__links-tittle">
                  <h6>Office Time</h6>
                </div>
                <div class="footer__links-content">
                  <ul class="footer__linklist">
                    <li class="footer__linklist-item">
                      <p class="m-0">
                        工作日: &nbsp;&nbsp;&nbsp;&nbsp;9:00AM - 8.00PM
                      </p>
                    </li>
                    <li class="footer__linklist-item">
                      <p class="m-0">非工作日: 9:00AM - 5.00PM</p>
                    </li>
                    <!--  <li class="footer__linklist-item">
                      <p class="m-0">Friday: Close</p>
                    </li> -->
                  </ul>
                  <ul class="social mt-4">
                    <li class="social__item">
                      <nuxt-link
                        to="javascript:void(0);"
                        class="social__link social__link--rounded1"
                      >
                        <i class="fa-brands fa-weixin"></i>
                      </nuxt-link>
                    </li>
                    <li class="social__item">
                      <nuxt-link
                        to="javascript:void(0);"
                        class="social__link social__link--rounded1"
                        >
                        <i class="fab fa-qq"></i
                      >
                    </nuxt-link>
                    </li>
                    <li class="social__item">
                      <nuxt-link
                        to="javascript:void(0);"
                        class="social__link social__link--rounded1"
                        >
                        <i class="fab fa-tiktok"></i
                      >
                    </nuxt-link>
                    </li>
                    <li class="social__item">
                      <a
                        href="https://space.bilibili.com/290047704"
                        class="social__link social__link--rounded1"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <i class="fab fa-bilibili"></i>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer__bottom">
          <div class="row">
            <div class="col-lg-12">
              <div class="footer__end">
                <div class="footer__end-copyright">
                  <p class="mb-0">
                    Copyright @ 2023 By
                    <a
                      class="text-white"
                      href="https://themeforest.net/user/thetork/portfolio"
                      target="_blank"
                      >TheTork</a
                    >. All Right Reserved.
                  </p>
                </div>
                <div>
                  <ul class="footer__end-links">
                    <li class="footer__end-item">
                      <nuxt-link to="javascript:void(0);">
                        Terms & Conditions
                      </nuxt-link>
                    </li>
                    <li class="footer__end-item">
                      <nuxt-link to="javascript:void(0);">
                        Privacy Policy
                      </nuxt-link>
                    </li>
                    <li class="footer__end-item">
                      <nuxt-link to="javascript:void(0);"> Sitemap </nuxt-link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <teleport to="body">
    <transition name="scrolltop">
      <a
        v-if="scrollPosition > 300"
        class="scrollToTop scrollToTop--home1"
        href="javascript:void(0);"
        @click="scrollingTop"
      >
        <i class="fa-solid fa-arrow-up-from-bracket"></i>
      </a>
    </transition>
  </teleport>
</template>

<script>
export default {
  data() {
    return {
      scrollPosition: 0,
      listedPathNames: [
        "index",
        "courses",
        "course-details",
        "mentor-details",
        "blog",
        "blog-details",
      ],
    };
  },
  watch: {
    $route() {
      if (
        document
          .getElementById("custom-footer")
          ?.classList.contains("footer__top--style1")
      )
        document
          .getElementById("custom-footer")
          .classList.remove("footer__top--style1");
    },
  },
  computed: {
    isExtraPadding() {
      const currentPath = this.$route.name;
      return this.listedPathNames.some((e) => e === currentPath);
    },
  },
  created() {
    if (process.client) {
      window.addEventListener("scroll", this.handleScroll);
    }
  },
  destroyed() {
    if (process.client) {
      window.removeEventListener("scroll", this.handleScroll);
    }
  },
  methods: {
    handleScroll() {
      if (process.client) {
        this.scrollPosition = window.scrollY;
      }
    },
    scrollingTop() {
      window.scrollTo(0, 0);
    },
  },
};
</script>
